<template>
	<view class="artisterBg" :style="{backgroundImage: 'url('+ArtisterInfo.BackgroundPic+')'}">
		<view class="status_bar" style="height:90rpx">
			<fui-status-bar background="none" isFixed></fui-status-bar>
		</view>
		<view class="goBack" @click="goBack">
			<fui-icon name="arrowleft" color="#FFF"></fui-icon>
		</view>
		<view class="artisterBottom flexbc" style="text-align:center;line-height:80rpx;color:#666">
			正在以访客视角浏览您的主页
		</view>

		<view class="artisterTitles">
			<view class="artisterHeadpic" :style="{backgroundImage: 'url('+ArtisterInfo.WxHeadPic+')'}"></view>
			<view class="interestBtn" @click="interestBtn">关注</view>
			<view class="artisterInfo">
				<view class="arterName" style="font-size:32rpx;font-weight:bold;">{{ ArtisterInfo.NickName }}</view>
				<view class="artLabelBox flexbc">
					<view style="font-size:24rpx;color:#999">
						<span v-for="(item, index) in ArtisterInfo.PublicRoles" :key="index">
							{{ item.LabelName }} ，
						</span>
						<span> {{ ArtisterInfo.UserCity }}</span>
					</view>
					<view style="font-size:20rpx;color:#CCC">2小时前来过</view>
				</view>
				<view class="artisterCount flexbc">
					<view>人气 <text>85</text></view>
					<view>粉丝 <text>5</text></view>
					<view>赞 <text>1</text></view>
				</view>
			</view>
		</view>

		<view class="artisterPages">
			<view class="artisterTab">
				<fui-tabs :tabs="ArtisterPages" :current="tabIndex" @change="changePages" selectedColor="#000"
					sliderBackground="#FFDD00"></fui-tabs>
			</view>

			<swiper :current="tabIndex" :duration="300" @change="tabChange" style="height:1260rpx">
				<swiper-item class="fui-swiper__item">
					<scroll-view scroll-y style="height:1160rpx">
						<view>
							<view class="artisterBaseInfo artisterBox"
								style="margin:0rpx;border-top:1rpx solid #f0f0f0">
								<view class="artisterInfoTitle">形象信息</view>
								<view class="flexbc">
									<view>
										<view>165cm</view>
										<view>身高</view>
									</view>
									<view>
										<view>165cm</view>
										<view>体重</view>
									</view>
									<view>
										<view>165cm</view>
										<view>三围</view>
									</view>
									<view>
										<view>165cm</view>
										<view>鞋码</view>
									</view>
								</view>
							</view>

							<!-- <view class="artisterPhoto artisterBox" style="height:200rpx;">
								<view class="artisterInfoTitle">形象视频</view>
								<view></view>
							</view> -->

							<view class="artisterPhoto artisterBox" style="height:400rpx;">
								<view class="artisterInfoTitle">形象照片</view>
								<view class="artPics">
									<view class="artPic"
										style="background-image: url('https://img0.baidu.com/it/u=554773115,1839885479&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666');background-size: cover;background-position: center">
									</view>
									<view class="artPic"
										style="background-image: url('https://img2.baidu.com/it/u=952380127,2199530341&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500');background-size: cover;background-position: center">
									</view>
									<view class="artPic"
										style="background-image: url('https://img1.baidu.com/it/u=1426279097,3016557949&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666');background-size: cover;background-position: center">
									</view>
								</view>
							</view>

							<view class="artisterLabel artisterBox" style="height:200rpx;">
								<view class="artisterInfoTitle">身份标签</view>
								<view></view>
							</view>
							<view class="artisterNote artisterBox" style="height:200rpx;">
								<view class="artisterInfoTitle">接单通告</view>
								<view></view>
							</view>
							<view class="artisterStyle artisterBox" style="height:260rpx;">
								<view class="artisterInfoTitle">形象风格</view>
								<view>
									<view class="labels" v-for="(item,key) of xingxianglabel" :key="key">
										{{ item }}
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>

				<swiper-item class="fui-swiper__item">
					<scroll-view scroll-y :style="{height:height+'px'}">
						<view>
							<view v-if="MokaList.length != 0" class="waterfall">
								<view v-for="(item,key) in MokaList" :key="key" class="waterfall-item"
									@click="$common.goNavPage('/pages/index/Moka/details?WorksID='+item.WorksID)">
									<image :src="JSON.parse(item.MokaPics)[0]" mode="widthFix"
										:style="{width:'100%', display: 'block' }"></image>
								</view>
							</view>
							<view class="noneInfos" v-else>暂无信息</view>
						</view>
					</scroll-view>
				</swiper-item>

				<swiper-item class="fui-swiper__item">
					<scroll-view scroll-y :style="{height:height+'px'}">
						<view>
							<view v-if="WorksList.length != 0" class="waterfall">
								<view v-for="(item,key) in WorksList" :key="key" class="waterfall-item"
									@click="$common.goNavPage('/pages/index/works/details?WorksID='+item.WorksID)">
									<image :src="JSON.parse(item.WorksUrls)[0]" mode="widthFix"
										:style="{width:'100%', display: 'block' }"></image>
								</view>
							</view>
							<view class="noneInfos" v-else>暂无信息</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>

		</view>
		<view style="height:180rpx;background-color:#f0f0f0;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ArtisterID: 0,
				ArtisterPages: [{
						name: '主页'
					},
					{
						name: '模卡'
					},
					{
						name: '作品'
					}
				],
				tabIndex: 0,
				ArtisterInfo: {
					BackgroundPic: 'https://img.1ppt.com/uploads/allimg/1902/1_190213153422_2.JPG'
				},
				xingxianglabel: [
					'可爱', '可爱', '可爱', '可爱', '可爱', '可爱', '可爱', '可爱', '可爱'
				],
				WorksList: [],
				MokaList: []
			};
		},
		onShow() {

		},
		onLoad(options) {
			this.ArtisterID = options.artisterID;
			// let time = 80
			// // #ifdef H5
			// time = 200
			// // #endif
			// setTimeout(() => {
			// 	this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(10);
			// 	// #ifdef MP
			// 	this.getStatus().then((res) => {})
			// 	// #endif
			// }, time)
			this.height = 5100;
			this.getArtister();
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			changePages(e) {
				// console.log(e)
				this.switchTab(e.index)
			},
			tabChange(e) {
				// console.log(e)
				if (e.detail.source == 'touch') {
					let index = e.target.current || e.detail.current;
					this.switchTab(index);
				}
			},
			switchTab(index) {
				if (this.tabIndex === index) return;
				this.tabIndex = index;
			},
			getArtister() {
				this.$httpost('/Artister/info', {
					ArtisterID: this.ArtisterID
				}).then(res => {
					// console.log('info', res)
					if (res.code == 200) {
						this.ArtisterInfo = res.data.ArtisterInfo;
					}
				})

				this.$httpost('/Artister/works', {
					ArtisterID: this.ArtisterID
				}).then(res => {
					// console.log('works', res)
					if (res.code == 200) {
						this.WorksList = res.data.WorksList;
						// console.log('WorksList', this.WorksList.length)
					}
				})

				this.$httpost('/Artister/moka', {
					ArtisterID: this.ArtisterID
				}).then(res => {
					// console.log('moka', res)
					if (res.code == 200) {
						this.MokaList = res.data.MokaList;
						// console.log('MokaList', this.MokaList)
					}
				})
			},
			interestBtn() {
				uni.showToast({
					title: '自己不能关注自己',
					icon: 'none'
				})
				// this.$httpost('/UserAction/guanzhuArtister', {ArtisterID:this.artisterID}).then(res => {
				// 	// console.log('guanzhu', res)
				// 	if (res.code == 200) {
				// 		// this.MokaList = res.data.MokaList;
				// console.log('MokaList', this.MokaList)
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss">
	.artisterBg {
		width: 100%;
		height: 700rpx;
		// background-image: url('https://hbimg.huabanimg.com/53392e6876c6a69c39da3a2a63c3a62ed4f9d26d23a781-4ckBVh_fw658');
		background-size: cover;
		background-position: center center;
	}

	.goBack {
		position: absolute;
		z-index: 100;
	}

	.artisterTop {
		height: 500rpx;
	}

	.artisterTitles {
		clear: both;
		margin-top: 500rpx;
		background-color: #f0f0f0;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		position: relative;
		height: 260rpx;
	}

	.artisterHeadpic {
		position: absolute;
		top: -70rpx;
		left: 30rpx;
		width: 150rpx;
		height: 150rpx;
		background-image: url('https://hbimg.b0.upaiyun.com/09c1ac7fa1083b0e1617603a2a23ab33309fc62738293-Yu4IWz_fw658');
		background-size: cover;
		border-radius: 150rpx;
	}

	.interestBtn {
		width: 200rpx;
		height: 60rpx;
		border-radius: 100rpx;
		background-color: $globalColor;
		float: right;
		margin: 20rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.artisterInfo {
		clear: both;
		padding: 30rpx;
		padding-top: 0rpx;
	}

	.artisterCount {
		width: 50vw;
		padding: 20rpx;
	}

	.artisterPages {
		background-color: #f0f0f0;
	}

	.artisterTab {
		display: flex;
		background-color: #FFF;
		justify-content: center;
	}

	.tabItem {
		width: 150rpx;
		padding: 10rpx;
		text-align: center;
	}

	.artisterBox {
		height: auto;
		padding: 20rpx;
		background-color: #FFF;
		margin-top: 10rpx;
	}

	.artisterInfoTitle {
		font-weight: bold;
		font-size: 30rpx;
	}

	.artisterBottom {
		background-color: #FFF;
		position: fixed;
		z-index: 1000;
		width: 100%;
		height: 100rpx;
		border-top: 1rpx solid #e0e0e0;
		bottom: 0;
	}

	.contact {
		width: 250rpx;
		height: 60rpx;
		background-color: #666;
		color: #FFF;
		border-radius: 10rpx;
		line-height: 60rpx;
		text-align: center;
		margin: 10rpx;
	}

	.waterfall {
		padding: 20rpx;
	}

	.waterfall-item {
		width: auto;
		height: auto;
		background: #FFF;
		padding: 15rpx;
		margin-bottom: 20rpx;
		// 	width: calc(33.33% - 20px);
		// 	margin: 0 10px;
		// 	box-sizing: border-box;
		// 	overflow: hidden;
	}

	.waterfall-img {
		width: 100%;
		height: 100%;
	}

	.sendMsg {
		width: 250rpx;
		height: 60rpx;
		background-color: #FFCC00;
		color: #FFF;
		border-radius: 10rpx;
		line-height: 60rpx;
		text-align: center;
		margin: 10rpx;
	}

	.labels {
		padding: 10rpx;
		border: 1rpx solid #CCC;
		border-radius: 10rpx;
		float: left;
		margin: 20rpx;
	}

	.artPics {
		clear: both;
		display: flex;
		// justify-content: space-between;
		margin-top: 40rpx;
	}

	.artPic {
		width: 30vw;
		height: 250rpx;
		background-color: #999;
		margin: 10rpx
	}

	.noneInfos {
		text-align: center;
		padding: 100rpx;
		color: #999
	}
</style>